<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list" ref="myElement">
        <div class="list_top">
            <div class="list_top_img">
                <van-image radius="5" :src="data?.productImage ? data?.productImage + '?x-oss-process=image/resize,w_300' : ''" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.mechanismList[1]?.cooperationMode">多机制</div>
                <div class="stock_doce">{{ data?.stockCode }}</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.productName }}</div>
                    <!-- <div class="status">研发品</div> -->
                </div>
                <div class="list_top_right_introduce">{{ data?.sellingPoints }}</div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <div v-if="data?.mechanismList[0].cooperationMode === '分佣'">
                            ￥<span>{{ data?.mechanismList[0].price }}</span>
                        </div>
                        <div v-else>
                            ￥<span>{{ data?.mechanismList[0].costPrice }}</span>
                        </div>
                        <div v-if="data?.mechanismList[0].cooperationMode === '分佣'" class="commission">
                            <span class="fonts">佣</span>
                            <span class="numbers">
                                {{ data?.mechanismList[0].commission }}%
                            </span>
                        </div>
                    </div>
                    <div class="money_right">
                        {{ data?.mechanismList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="list_top_right_library">
                    <div class="inventory">
                        <div class="label">库存</div>
                        <div class="value">{{ data?.stockNum || 0 }}件</div>
                    </div>
                    <div class="sales">
                        <div class="label">出库</div>
                        <div class="value">{{ data?.countOutNum || 0 }}次</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="describe">
            {{ data?.stockOutTime }} | {{ data?.days || 0 }}天 | {{ data?.outNum || 0 }}件 | {{ data?.deptName }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
defineProps({
    data: { type: Object, default: () => { } },
})
const myElement = ref()
</script>

<style lang="less" scoped>
@import url(@/views/operation/operationHomeList/components/style/invest.less);
</style>